<template>
	<view class="container">
		<view style="padding: 30rpx;background-color: #EED146;">
			<view class="font-size-base11"><u-icon class="mr-10" name='bell' size="28"></u-icon>  安全提醒：切勿相信任何交钱刷单的合作！</view>
		</view>
		
		<view class="p-30">	
		<view class="p-30 bg-white mb-20 section border-radius-base address">
			<view class="user-item mb-20 pb-20" @tap="jumpUser(message.user.uuid)">
				<cos-avatar :src="message.user.avatar" :showSex="true" :sexIcon="message.user.gender_label"></cos-avatar>
				<view class="user-item-user">
					<view class="d-flex align-items-center mb-10">
						<view class="user-name mr-10">{{ message.user.nickname }}</view>
					</view>
					<view class="d-flex align-items-center">
						<view class="cxplain mr-10" v-if="message.user.city || message.user.province">{{ message.user.city || message.user.province }} |</view>
						<view class="cxplain mr-10">{{ message.user.identity_label }}</view>
						<view class="tag-box d-flex" v-if="message.user.is_guaranty || message.user.is_cert">
							<view class="mr-10 tag tag-guaranty" v-if="message.user.is_guaranty==1"><u-icon name='rmb' color="#ffffff" size='22'></u-icon>已担保</view>
							<view class="mr-10 tag tag-cert" v-if="message.user.is_cert==1"><u-icon name='account-fill' color="#ffffff" size='22'></u-icon>已认证</view>
						</view>
					</view>
				</view>
				<view class="text-color-assist font-size-sm">{{$f.timeAgo(message.time_diff)}}申请</view>
			</view>
			<view class="d-flex mb-20">
				<view class="flex-shrink-0">{{message.type=='shoot'?'约拍请求：':'联系请求：'}}</view>
				<view>{{message.demand}}</view>
			</view>
			<view class="p-20 text-over" style="background-color: #eee;" @tap="jump('/pages/post/detail?id='+message.post_id+'&type='+message.type)">来自{{message.type_label}}：{{message.post.demand||message.post.describe}}</view>
		</view>
			
			<view class="p-30 bg-white mb-40 section border-radius-base">
				<view class="mb-20 title d-flex justify-content-between align-items-center">
					<view class='font-size-lg font-weight-bold'><view style="width: 12rpx;background-color: #EED146;height: 36rpx;display: inline-block;vertical-align: -6rpx;border-radius: 20rpx;margin-right: 20rpx;"></view>联系方式 <text class="text-color-assist font-size-sm ml-20 font-weight-normal">(联系请说明来自人人约拍)</text> </view>
				</view>
				<view class="mb-10 d-flex justify-content-between">
					<view class="d-flex flex-shrink-0">
						<view class="mr-20 text-color-assist" style="width: 120rpx;">手机号:</view>
						<view>{{message.mobile}}</view>
					</view>
					<view v-if="message.status==2" class="text-color-primary" @tap="tel(message.mobile)">拨打</view>
				</view>
				<view class="mb-10 d-flex justify-content-between">
					<view class="d-flex flex-shrink-0">
						<view class="mr-20 text-color-assist" style="width: 120rpx;">微信号:</view>
						<view>{{message.wechat_no}}</view>
					</view>
					<view v-if="message.status==2" class="text-color-primary" @tap="copy(message.wechat_no)">复制</view>
				</view>
				<!-- <view class="mb-10 d-flex justify-content-between" v-if="message.sign_up.task.need==1||message.sign_up.task.need==2">
					<view class="d-flex flex-shrink-0">
						<view class="mr-20 text-color-assist" style="width: 120rpx;">收货人:</view>
						<view>{{message.sign_up.name}}</view>
					</view>
					<view class="text-color-primary" @tap="copy(message.sign_up.name)">复制</view>
				</view>
				<view class="mb-10 d-flex justify-content-between" v-if="message.sign_up.task.need==1||message.sign_up.task.need==2">
					<view class="d-flex">
						<view class="mr-20 text-color-assist flex-shrink-0" style="width: 120rpx;">收货地址:</view>
						<view>{{message.sign_up.address}}</view>
					</view>
					<view class="text-color-primary flex-shrink-0" @tap="copy(message.sign_up.address)">复制</view>
				</view> -->
			</view>
			<view class="font-size-base" style="color: #9A9A9A;">
				<view class="mb-10">温馨提示：</view>
				<view class="mb-10">1.平台禁止一切网店刷单操作。</view>
				<view class="mb-10">2.平台禁止一切色情私房拍照。</view>
				<view class="mb-10">3.切勿私下缴纳费用或定金的合作，发生经济纠纷小程序概不负责。</view>
			</view>
		</view>
		
		<!--  end -->
		<view class="sign-up-footer d-flex just-content-around align-items-center">
			<button v-if="message.status==0||message.status==1" type="primary" @tap='lookContact'>点击查看联系方式</button>
			<button v-else-if="message.status==2" type="primary">已查看</button>
			
			<!-- <button v-else-if="message.status==0" type="primary" @tap='openCooperate'>开启合作</button>
			<button v-else-if="message.status==1" type="info" @tap='finshCooperate'>合作完成</button>
			<button disabled="true" v-else-if="message.status==99" type="default">合作结束</button> -->
		</view>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			id:'',
			message:'',
		}
	},
	computed:{
		...mapState(['hasLogin', 'userInfo', 'contact']),
	},
	onLoad(options) {
		this.id = options.id;
		this.getMessage()
	},
	methods:{
		async getMessage() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			let res = await this.$api('applyDetail')
			this.message = res.data;
			uni.hideLoading();
		},
		lookContact() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '查看联系方式需要消耗1个人人豆',
				confirmText:'查看',
				success (res) {
					if (res.confirm) {
						uni.showLoading({
							mask: true,
							title: '获取中...'
						});
						that.$H.post('message/lookContact', {message_id:that.id, type:'apply'}).then(res=>{
							that.message.status  = 2;
							that.message.mobile = res.data.mobile;
							that.message.wechat_no = res.data.wechat_no;
							uni.hideLoading();
						});
					}
				}
			})
		},
		openCooperate() {
			uni.showLoading({
				mask: true,
				title: '开启中...'
			});
			
			this.$H.post('message/openCooperation', {id:this.message.relate_message_id}).then(res=>{
				this.message.sign_up.status=1;
				uni.hideLoading();
			});
		},
		finshCooperate() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确认完成合作？',
				confirmText:'确认',
				success (res) {
					if (res.confirm) {
						uni.showLoading({
							mask: true,
							title: '完成中...'
						});
						that.$H.post('message/finishCooperation', {id:that.message.relate_message_id}).then(res=>{
							that.message.sign_up.status=99;
							uni.hideLoading();
						});
					}
				}
			})
			
		},
		tel(mobile) {
			this.$f.tel(mobile);
		},
		copy(text) {
			this.$f.copy(text);
		},
		jump(url) {
			uni.navigateTo({
				url:url
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.container {
		height: auto;
		padding-bottom: 120rpx;
	}	
	.section {
		box-sizing: border-box;
		
		textarea {
			background-color: #f7f7f7;
			padding: 30rpx;
			width: 100%;
			height: 200rpx;
		}
	}
	
	.user-item {
		display: flex;
		justify-content: center; // 内容自适应：上下居中
		align-items: center; // 子项对齐方式：左右居中
		border-bottom: 2rpx solid #eee;
		
		.user-item-user {
			flex: 1;
			
			.cxplain {
				color: #999;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}
		
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	
	.sign-up-footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background-color: #FFFFFF;
		z-index: 10;
		padding: 20rpx 10rpx;
		
		button {
			height: 100%;
			font-size: $font-size-lg;
			border-radius: 100rpx !important;
			line-height: 80rpx;
			padding: 0 80rpx;
		}
	}
	.tag-box {
		.tag{
			padding: 0rpx 10rpx;
			border-radius: 5rpx;
			font-size: 22rpx;
			background-color: #f5f5f5;
			color: #616161;
		}
		
		.tag-guaranty {
			color: #ffffff;
			background-color: #24B19A;
		}
		
		.tag-cert {
			color: #ffffff;
			background-color: #5A84FB;
		}
	}
</style>
